<template>
  <PageWrapper contentBackground contentClass="p-4" class="tuisong">
    <a-row class="title">
      <a-col :span="12">推送URL</a-col>
      <a-col :span="10">适用场景</a-col>
      <a-col :span="2">操作</a-col>
    </a-row>
    <a-row class="infoArea">
      <a-col :span="12">
        <div class="flex">
          <span>实时采集推送</span>
          <a-input
            class="ipt"
            v-model:value="pushObj.address"
            placeholder="请输入URL"
            size="default"
            @blur="saveData"
          />
        </div>
      </a-col>
      <a-col :span="10">{{ pushObj.comment }}</a-col>
      <a-col :span="2"><span class="operation" @click.stop="send">测试</span></a-col>
    </a-row>
  </PageWrapper>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted, reactive } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getpushconfig, setpushconfig, test_push } from '/@/api/sys/gateway/gateway';
  export default defineComponent({
    components: { PageWrapper },
    setup() {
      const { createMessage } = useMessage();
      const URL = ref('');
      let pushObj: any = reactive({
        address: '',
        comment: '',
      });
      //鼠标移出保存数据
      function saveData() {
        setpushconfig({
          address: pushObj.address,
          comment: '所有设备实时采集数据',
        }).then(() => {
          createMessage.success('设置成功');
        });
      }
      onMounted(() => {
        getpushconfig().then((e: any) => {
          Object.assign(pushObj, e);
        });
      });
      //测试请求
      function send() {
        test_push().then(() => {
          createMessage.success('验证连接成功');
        });
      }
      return {
        pushObj,
        URL,
        send,
        saveData,
      };
    },
  });
</script>

<style lang="less">
  .tuisong {
    .title {
      font-size: 14px;
      font-weight: 600;
    }
    .infoArea {
      height: 80px;
      display: flex;
      align-items: center;
      .flex {
        width: 90%;
        display: flex;
        align-items: center;
        span {
          margin-right: 10px;
          text-align: right;
          // width: 22%;
        }
        .ipt {
          flex: 1;
        }
      }
    }
    .operation {
      color: #0960bd;
      cursor: pointer;
    }
  }
</style>
